<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script>
            window.onload = function () {
                let d = document.getElementById('d');
                // console.log(d); // null 不是undefined
                // let a;
                // console.log(a);
            };
        </script>
    </head>
    <body>
        <div id="d">
            <div v-text="'hello,Vue'"></div>
            <div v-text="msg"></div>
            <div v-html="'<h1>hello,Vue<h1>'"></div>
            <div v-html="msg2" v-show="isShow"></div>
            <div v-if="isIf >80">85</div>
            <div v-else-if="isIf>70">75</div>
            <div v-else="isIf>60">65</div>
        </div>
        <script src="../jquery-3.5.1.min.js">
            // 这里的代码不会执行
        </script>
        <script src="../vue.js"></script>

        <script>
            // let d = document.getElementById('d');
            // console.log(d);
            // $('#d').text('hello,vue!');
            // $('#d').html('<h2>hello,vue!</h2>');

            // d.innerText = 'hello,vue';
            // d.innerHTML = '<h1>hello,vue</h1>';

            // let did = $('#d').text();

            console.dir($);
            console.dir(Vue);

            new Vue({
                el: '#d',
                // Vue里面所有的变量都是放在data里面
                data(){
                    return {
                        msg: 'hello,vue!',
                        msg2: '<h2>Hello,World!</h2>',
                        isShow: '', // null 0 false undefined  // {}: true []: true
                        // 堆 栈
                        isIf: 85,
                    };
                },
            });
        </script>
    </body>
</html>
<script>
    console.log(3333);
</script>
